<template>
    <div>
      <HeadOptions></HeadOptions>
      <Float :profit="profit" :vid="vid" :coefficientHeight="'0.3'" v-if="freeorno == 0"></Float>
      <p class="pictitle">{{title}}</p>
      <div class="picinfo">
        <p>{{detail}}</p>
        <Options :collection="collection" :vid="vid"></Options>
      </div>
      <div class="piccontent" v-html="content"></div>
      <BottomBtn :xianjia="xianjia"  v-on:listersonpay="parentpay" v-if="buyorno == 1 || freeorno ==0"></BottomBtn>
    </div>
</template>

<script>
import HeadOptions from './../DetailOfBoom/components/HeadOptions'
import Options from './../DetailOfBoom/components/Options'
import BottomBtn from './../DetailOfBoom/components/BottomBtn'
import Float from "./../DetailOfVedio/components/Float"
import * as fetch from '@/api/fetch'

import Vue from "vue"
import { Toast } from 'vant';
Vue.use(Toast);




import { weixinConfig, chooseWXPay } from '@/api/wechatPay'


export default {
  name: 'DetailOfPic',
  data () {
    return {
      vid: '',
      title: '',
      detail: '',
      content: '',
      collection: '',
      shop_price: '',
      profit:"",
      xianjia:"",

      buyorno:"",
      freeorno:"",

      inviter:0,
      spread_id:0
    }
  },
  methods: {
    async getVideoInfo () {
      const res = await fetch.getVideoInfo({
        vid: this.$route.query.vid,
        page: 1
      })
      console.log(res)
      if (res.errcode == 0) {
        this.title = res.data.title,
        this.detail = res.data.detail,
        this.content = res.data.content,
        this.collection = res.data.collection
        this.shop_price = res.data.shop_price
        this.vid = res.data.vid
        this.profit=res.data.profit
        this.xianjia = res.data.shop_price
        this.buyorno=res.data.is_buy
        this.freeorno=res.data.is_free
      }
    },

    async playVideoLog() {
      const res = await fetch.playVideoLog({
        vid: this.$route.query.vid,
        length:0
      })
      console.log(res)
    },

    async processOrder () {
      console.log("开始支付")
      console.log(this.inviter)
      console.log(this.spread_id)

      const res = await fetch.processOrder({
        vid: this.$route.query.vid,
        inviter:this.inviter,
        spread_id:this.spread_id
      })
      console.log(res)
      return  res
    },

    parentpay() {
      this.processOrder().then(res => {
        if (res.errcode == 0) {
          weixinConfig(res.data.signPackage)
          chooseWXPay(res.data.jsapi, {
            success: function (res) {
              Toast.success('支付成功')
              window.location.reload()
            },
            cancel() {
              alert('已取消支付')
            },
            fail() {
              alert('购买失败，请重新创建订单')
            },
          })
        }
      })
    }
  },
  components: {
    HeadOptions,
    Options,
    BottomBtn,
    Float
  },
  mounted () {
  },
  activated () {
    this.getVideoInfo()
    this.playVideoLog()

    console.log(this.$route.query.vid)
    console.log(this.$route.query.inviter)
    console.log(this.$route.query.spread_id)
    if (this.$route.query.inviter == undefined && this.$route.query.spread_id == undefined) {
      this.inviter = 0
      this.spread_id = 0
    } else {
      this.inviter = this.$route.query.inviter
      this.spread_id = this.$route.query.spread_id
      this.saveUserInvitation()
    }
  },
}
</script>
<style>
  .piccontent img{
    width: 100%;
  }
  .piccontent section{
    width: 100%;
  }
</style>
<style lang="less" scoped>

.pictitle{
  margin-top: 50px;
  display: block;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 18px;
  line-height: 20px;
}
  .picinfo{
    margin-left: 15px;
    margin-right: 5px;
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #acacac;
  }
  .piccontent{
    margin: 15px 0px 60px 0;
  }
</style>
